<template>
  <view class="container">
    <!-- 步骤指示器 -->
    <view class="steps">
      <view class="step-item active">
        <view class="step-num">1</view>
        <view class="step-text step-text-blue">第一步</view>
      </view>
      <view class="step-line"></view>
      <view class="step-item">
        <view class="step-num step-num-gray">2</view>
        <view class="step-text step-text-gray">第二步</view>
      </view>
      <view class="step-line"></view>
      <view class="step-item">
        <view class="step-num step-num-gray">3</view>
        <view class="step-text step-text-gray">第三步</view>
      </view>
    </view>

    <!-- 事件类型选择标题 -->
    <view class="type-title">事件上报</view>

    <!-- 事件类型按钮组 -->
    <view class="type-buttons">
      <button
          class="type-btn"
          v-for="(item, index) in eventTypes"
          :key="index"
          @click="handleTypeClick(item)"
          :class="{ 'active-type': selectedType === item.text }"
      >
        <image :src="item.icon" class="type-icon"></image>
        <text class="type-text">{{ item.text }}</text>
      </button>
    </view>

    <!-- 其他事件输入框（默认隐藏，点击“其他”时显示） -->
    <view class="other-input" v-if="showOtherInput">
      <textarea
          placeholder="请具体说明..."
          class="other-textarea"
          v-model="otherText"
      ></textarea>
    </view>

    <!-- 是否报送心理健康中心 -->
    <view class="mental-health" v-if="!showOtherInput">
      <text class="mental-text">是否报送心理健康中心</text>
      <button
          class="mental-btn"
          @click="selectMental('是')"
          :class="{ 'active-btn': mentalSelect === '是' }"
      >
        是
      </button>
      <button
          class="mental-btn"
          @click="selectMental('否')"
          :class="{ 'active-btn': mentalSelect === '否' }"
      >
        否
      </button>
    </view>

    <!-- 下一步按钮 -->
    <button class="next-btn" @click="gotoNextPage">下一步</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 事件类型数据
const eventTypes = ref([
  { icon: '/static/group.png', text: '群体事件' },
  { icon: '/static/serious-illness.png', text: '重大疾病' },
  { icon: '/static/suicide.png', text: '自杀' },
  { icon: '/static/missing.png', text: '失踪' },
  { icon: '/static/fraud.png', text: '诈骗' },
  { icon: '/static/fight.png', text: '打架斗殴' },
  { icon: '/static/accident.png', text: '意外伤害' },
  { icon: '/static/theft.png', text: '偷盗' },
  { icon: '/static/fire.png', text: '火灾(火险)' },
  { icon: '/static/traffic.png', text: '交通事故' },
  { icon: '/static/psychological.png', text: '心理问题' },
  { icon: '/static/epidemic.png', text: '传染性疾病等公共卫生事件' },
  { icon: '/static/internet.png', text: '网络舆情' },
  { icon: '/static/other.png', text: '其他' },
]);

// 选中的事件类型
const selectedType = ref('');
// 控制“其他”输入框显示隐藏
const showOtherInput = ref(false);
// 其他事件的具体内容
const otherText = ref('');
// 心理健康中心选择状态
const mentalSelect = ref('');

// 处理事件类型按钮点击
const handleTypeClick = (item) => {
  selectedType.value = item.text;
  // 如果点击的是“其他”选项，显示输入框
  showOtherInput.value = item.text === '其他';
};

// 选择是否报送心理健康中心
const selectMental = (val) => {
  mentalSelect.value = val;
};

// 跳转到下一步
const gotoNextPage = () => {
  // 简单的表单验证
  if (!selectedType.value) {
    uni.showToast({
      title: '请选择事件类型',
      icon: 'none'
    });
    return;
  }

  if (showOtherInput.value && !otherText.value) {
    uni.showToast({
      title: '请输入其他事件的具体内容',
      icon: 'none'
    });
    return;
  }

  if (!mentalSelect.value && !showOtherInput.value) {
    uni.showToast({
      title: '请选择是否报送心理健康中心',
      icon: 'none'
    });
    return;
  }

  // 跳转页面
  uni.navigateTo({
    url: '/pages/index/index_jiankang',
    fail: (err) => {
      console.error('页面跳转失败:', err);
      uni.showToast({
        title: '跳转失败，请检查页面路径',
        icon: 'none'
      });
    }
  });
};
</script>

<style scoped>
.container {
  padding: 10px;
  background-color: #ffffff;
  min-height: 100vh;
  box-sizing: border-box;
}

.steps {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 20px;
  width: 90%; /* 步骤条整体宽度缩短为原来的90% */
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(1.1); /* 步骤项整体放大10% */
}

.step-num {
  width: 26.4px; /* 原24px放大10% */
  height: 26.4px; /* 原24px放大10% */
  border-radius: 50%;
  background-color: #007aff;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4.4px; /* 原4px放大10% */
}

.step-num-gray {
  width: 26.4px; /* 原24px放大10% */
  height: 26.4px; /* 原24px放大10% */
  border-radius: 50%;
  background-color: #cccccc;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4.4px; /* 原4px放大10% */
}

.step-text {
  font-size: 12px;
  color: #333333;
}

.step-text-blue {
  font-size: 12px;
  color: #007aff; /* 第一步文字改为蓝色 */
}

.step-text-gray {
  font-size: 12px;
  color: #cccccc;
}

.step-line {
  flex: 1;
  height: 1px;
  background-color: #cccccc;
  margin: 0 8px; /* 步骤线之间的间距缩短 */
}

.type-title {
  font-size: 16px;
  color: #333333;
  margin: 10px 0;
  font-weight: 500;
}

.type-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.type-btn {
  width: calc(50% - 5px);
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  transition: all 0.3s;
}

.type-btn.active-type {
  border-color: #007aff;
  background-color: #e8f3ff;
}

.type-icon {
  width: 26.4px; /* 原24px放大10% */
  height: 26.4px; /* 原24px放大10% */
  margin-right: 8px;
}

.type-text {
  font-size: 14px;
  color: #333333;
}

.other-input {
  margin: 10px 0;
}

.other-textarea {
  width: 100%;
  height: 80px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.mental-health {
  display: flex;
  align-items: center;
  margin: 20px 0;
  flex-wrap: wrap;
  gap: 10px;
}

.mental-text {
  font-size: 14px;
  color: #333333;
}

.mental-btn {
  padding: 6px 12px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: #ffffff;
  transition: all 0.3s;
}

.mental-btn.active-btn {
  background-color: #007aff;
  color: #ffffff;
  border-color: #007aff;
}

.next-btn {
  width: 100%;
  padding: 12px;
  background-color: #007aff;
  color: #ffffff;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  margin-top: 20px;
}

/* 修复按钮点击效果 */
button {
  line-height: normal;
  touch-action: manipulation;
}

button::after {
  border: none;
}
</style>